<template>
  <!--课程购买-->
  <div>
    <headers></headers>
    <div class="padding88">
      <div class="divider">
        <div class="auto">
          <router-link to="/">首页</router-link> <span>></span>推荐讲师列表
        </div>
      </div>
    </div>
    <div class="auto daoshis">
      <div class="padding250" v-if="lecturers.length !== undefined && lecturers.length > 0">
        <div class="carousel_daoshi clearfix">
          <div class="teacher" v-for="(lecturer,index) in lecturers" :key="index">
          <!--<div class="teacher" v-for="(lecturer,index) in lecturers" :key="index" @click.stop="lecturerList(lecturer.id)">-->
            <img :src="lecturer.lecturerImg" alt="" width="280" height="280">
            <p class="names">{{lecturer.lecturerName}}导师</p>
            <div class="des" >
              <p>{{lecturer.lecturerName}}导师</p>
              <p v-html="lecturer.summary"></p>
            </div>
          </div>
        </div>
        <div class="pageout"><Page :total="total" :current="pageNumber" :page-size="size" @on-change="changePage"/></div>
      </div>
      <div v-else class="padding250">
        <nodata tip="暂时还没有讲师哦~"></nodata>
      </div>
    </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }
  .auto.daoshis{
    padding-top: 30px;
  }
  .teacher{
    float: left;
    position: relative;
    margin-right: 26px;
    margin-bottom: 26px;
    width:  280px;
    height: 280px;
    cursor: pointer;
    .names{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: rgba(0,0,0,0.5);
      text-align: center;
      color: #fff;
      font-size: 14px;
      opacity: 1;
    }
    .des{
      opacity: 0;
      background-color: rgba(0,0,0,0.5);
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      left: 0;
      color: #fff;
      text-align: left;
      padding: 0 21px;
      p:first-child{
        text-align: center;
        font-size: 14px;
        margin: 20px 0 15px;
      }
      p:last-child{
        font-size: 12px;
        line-height: 20px;
      }
    }
  }
  .teacher:hover{

    .des{
      opacity: 1;
      transition: all 0.3s;
    }
    .names{
      opacity: 0;
      transition: all 0.3s;
    }
  }
  .teacher:nth-child(4n){
    margin-right: 0;
  }

  .divider{
    height: 60px;
    background-color: #2F261E;
    font-size: 14px;
    line-height: 60px;
    text-align: left;
    color: #fff;
    span{
      margin: 0 10px;
    }
    a{
      color: #fff;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
  }
</style>
<script type="text/ecmascript-6">
  import lives from '../template/live'
  import headers from '../template/header'
  import footers from '../template/footer'
  import nodata from '../template/null'
  import {centreInfoWeb, lecturersList} from '../../http'
  import {getStore} from "../../storage";
  export default {
    name: 'list',
    props: {},
    data() {
      return {
        total:0,
        size:12,
        pageNumber:1,
        isSpinShow:false,
        lecturers:''
      };
    },
    methods: {
      //查看推荐讲师课程
      lecturerList(id){
        this.$router.push({
          name:'lecturerlist',
          query:{'lecturerId' : id},
        })
      },
      //换页
      changePage(pageNumber){
        this.pageNumber = pageNumber;
        if(this.isSpinShow === false) {
          this.isSpinShow = true;
          lecturersList({pageNumber: pageNumber,pageSize:this.size}).then(res => {
            this.isSpinShow = false;
            this.lecturers = res.data.lecturers.rows;
            this.total = res.data.lecturers.total;
          }).catch();
        }
      }
    },
    created() {
      if(this.isSpinShow === false) {
        this.isSpinShow = true;
        //获取推荐导师
        lecturersList({pageNumber: 1,pageSize:this.size}).then(res => {
          this.isSpinShow = false;
          //从走马灯改为标签不在使用
          /*let list = res.data.lecturers.rows;
          //讲师列表拆分
          let arr = list; //要拆分的数组
          let len = 4;  //每组元素个数
          let a_len = arr.length;
          let result = [];  //结果数组
          for (let i = 0; i < a_len; i += len) {
            let res = arr.slice(i, i + len);
            result.push(res);
          }
          this.lecturers = result;*/
          this.lecturers = res.data.lecturers.rows;
          this.total = res.data.lecturers.total;
        }).catch();
      }
    },
    components: {
      headers,
      footers,
      lives,
      nodata
    }
  }
</script>
